{extend name="public/container"}
{block name="head_top"}
<script src="{__PLUG_PATH}echarts/echarts.common.min.js"></script>
{/block}
{block name="content"}
<style type="text/css">
body{
    background-color: #f2f2f2;
}
.page {

}
.page-item {
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
}
.page-item .item-header {
    padding: 10px 0;
}
.page-item .item-header .left {
    align-items: center;
    font-size: 18px;
}
.page-item .item-header .left .indicator {
    background-color: #000;
    width: 4px;
    height: 14px;
    margin-right: 5px;
}
.page-item .item-content {
    padding: 10px 0;
    margin-top: 15px;
}
.statistic .bar-list {
    flex-wrap: wrap;
}
.statistic .message {
    justify-content: space-between;
}
.statistic .message .bar-item {
    width: 20%;
}
.statistic .message .bar-item:not(:last-child) {
    margin-right: 0px!important;
}
.statistic .bar-list .bar-item {
    padding: 20px 50px;
    background-color: #ccc;
    color: #FFF;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin-bottom: 20px;
}
.statistic .bar-list .bar-item:not(:last-child) {
    margin-right: 30px;
}
.statistic .bar-list .bar-item .bar-info {
    flex-direction: column;
}
.statistic .bar-list .bar-item .bar-info .title {
    margin-bottom: 4px;
    font-size: 13px;
}
.statistic .bar-list .bar-item .bar-info .nums {
    font-size: 30px;
}

.order-summary .bar-list {
    flex-wrap: wrap;
    flex-direction: column;
}
.order-summary .bar-list .bar-item {
    align-items: center;

}
.order-summary .bar-list .bar-item:not(:last-child) {
    margin-bottom: 20px;
}

.order-summary .bar-list .bar-item .pie {
    padding: 20px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    margin-right: 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.order-summary .bar-list .bar-item .bar-info {
    flex-direction: column;

}
.order-summary .bar-list .bar-item .bar-info .title {
    margin-bottom: 4px;
    font-size: 13px;
    color: #999;
}
.order-summary .bar-list .bar-item .bar-info .nums {
    font-size: 22px;
    color: #333;
}
.order-char-item {
    padding: 6px 30px;
    background-color: #f2f2f2;
    border-radius: 8px;
    cursor: pointer;
}
.order-char-item:not(:last-child){margin-right: 15px}
.active {
    background-color: rgb(255, 107, 107);
    color: #FFF;
}
</style>
<div id="app">
    <div class="page">
        <!-- 用户统计 -->
        <div class="page-item">
            <div class="item-header">
                <div class="left flex">
                    <div class="indicator"></div>
                    <div>用户统计</div>
                </div>
            </div>

            <div class="item-content statistic">
                <div class="bar-list flex">
                    <div class="bar-item flex" style="background-color: #7d6aff">
                        <div class="bar-info flex">
                            <div class="title">总用户数</div>
                            <div class="nums">{{ userState.totalUserNums }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #ffa66a">
                        <div class="bar-info flex">
                            <div class="title">近7天新增</div>
                            <div class="nums">{{ userState.sevenDaysPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #ff6b6b">
                        <div class="bar-info flex">
                            <div class="title">昨日新增</div>
                            <div class="nums">{{ userState.yesdayPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #69b5ff">
                        <div class="bar-info flex">
                            <div class="title">今日新增</div>
                            <div class="nums">{{ userState.todayPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #b96bff">
                        <div class="bar-info flex">
                            <div class="title">今日订单数</div>
                            <div class="nums">{{ userState.todayOrderNums }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #e9c52b">
                        <div class="bar-info flex">
                            <div class="title">今日订单总额</div>
                            <div class="nums">{{ userState.todayOrderSum }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #18b566">
                        <div class="bar-info flex">
                            <div class="title">订单总额</div>
                            <div class="nums">{{ userState.totalOrderSum }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #fa3534">
                        <div class="bar-info flex">
                            <div class="title">待付订单数</div>
                            <div class="nums">{{ userState.unpaidOrderNums }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #e9c52b">
                        <div class="bar-info flex">
                            <div class="title">待付订单额</div>
                            <div class="nums">{{ userState.unpaidOrderSum }}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 订单统计 -->
        <div class="flex" style="margin-top:20px">
            <div class="page-item" style="width:260px;margin-right: 20px;">
                <div class="item-header">
                    <div class="left flex">
                        <div class="indicator"></div>
                        <div>订单统计</div>
                    </div>
                </div>

                <div class="item-content order-summary">
                    <div class="bar-list flex">
                        <div class="bar-item flex">
                            <div class="pie" style="background-color: #7d6aff">
                                总
                            </div>
                            <div class="bar-info flex">
                                <div class="title">总单数</div>
                                <div class="nums">{{ orderState.totalOrderNums }}</div>
                            </div>
                        </div>

                        <div class="bar-item flex">
                            <div class="pie" style="background-color: #ffa66a">
                                单
                            </div>

                            <div class="bar-info flex">
                                <div class="title">客单价</div>
                                <div class="nums">{{ orderState.avgOrderPrice }}</div>
                            </div>
                        </div>

                        <div class="bar-item flex" >
                            <div class="pie" style="background-color: #ff6b6b">
                                支
                            </div>

                            <div class="bar-info flex">
                                <div class="title">支付数</div>
                                <div class="nums">{{ orderState.paymentNums }}</div>
                            </div>
                        </div>

                        <div class="bar-item flex">
                            <div class="pie" style="background-color: #69b5ff">
                                金
                            </div>

                            <div class="bar-info flex">
                                <div class="title">付款金额</div>
                                <div class="nums">{{ orderState.paymentAmt }}</div>
                            </div>
                        </div>

                        <div class="bar-item flex" >
                            <div class="pie" style="background-color: #b96bff">
                                退
                            </div>

                            <div class="bar-info flex">
                                <div class="title">退款数</div>
                                <div class="nums">{{ orderState.refundNums }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="page-item" style="flex:1">
                <div class="item-header flex flex-between">
                    <div class="left flex">
                        <div class="indicator"></div>
                        <div>日/月订单数</div>
                    </div>
                    <div class="right flex">
                        <div :class="[orderChartType=='day'?'active':'','order-char-item']" @click="switchOrderOrderType('day')">日</div>
                        <div :class="[orderChartType=='month'?'active':'','order-char-item']" @click="switchOrderOrderType('month')"> 月</div>
                    </div>
                </div>

                <div class="item-content">
                    <div id="order-nums-chart" style="height: 400px;"></div>
                </div>
            </div>
        </div>

        <!-- 消息统计 -->
        <div class="page-item" style="margin-top:20px" v-if="false">
            <div class="item-header">
                <div class="left flex">
                    <div class="indicator"></div>
                    <div>消息统计</div>
                </div>
            </div>

            <div class="item-content statistic">
                <div class="bar-list message flex">
                    <div class="bar-item flex" style="background-color: #7d6aff">
                        <div class="bar-info flex">
                            <div class="title">总消息数</div>
                            <div class="nums">{{ userState.totalUserNums }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #ffa66a">
                        <div class="bar-info flex">
                            <div class="title">15天未跟进</div>
                            <div class="nums">{{ userState.sevenDaysPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #ff6b6b">
                        <div class="bar-info flex">
                            <div class="title">30天未跟进</div>
                            <div class="nums">{{ userState.yesdayPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #69b5ff">
                        <div class="bar-info flex">
                            <div class="title">60天未跟进</div>
                            <div class="nums">{{ userState.todayPlus }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #b96bff">
                        <div class="bar-info flex">
                            <div class="title">明日生日提醒（销售）</div>
                            <div class="nums">{{ userState.todayOrderNums }}</div>
                        </div>
                    </div>

                    <div class="bar-item flex" style="background-color: #e9c52b">
                        <div class="bar-info flex">
                            <div class="title">今日生日提醒（客户）</div>
                            <div class="nums">{{ userState.todayOrderSum }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
var my = new Vue({
    el: "#app",
    data(){
        return {
            orderChartType: 'month',
            userState: {
                totalUserNums: 0,
                sevenDaysPlus: 0,
                yesdayPlus: 0,
                todayPlus: 0,
                todayOrderNums: 0,
                todayOrderSum: 0,
                totalOrderSum: 0,
                unpaidOrderNums: 0,
                unpaidOrderSum: 0
            },
            orderState: {
                totalOrderNums: 0,
                avgOrderPrice: 0,
                paymentNums: 0,
                paymentAmt: 0,
                refundNums: 0
            }
        }
    },
    mounted : function () {
        this.renderOrderCharts()
        this.loadUserState()
        this.loadOrderState()
    },
    methods : {
        switchOrderOrderType( type ){
            this.orderChartType = type
            this.renderOrderCharts()
        }
        ,renderOrderCharts() {
            var chartDom = document.getElementById('order-nums-chart');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '日月订单数'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单数', '订单金额']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                      saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                      name: '订单数',
                      type: 'line',
                      stack: 'Total',
                      data: []
                    },
                    {
                      name: '订单金额',
                      type: 'line',
                      stack: 'Total',
                      data: []
                    }
                ]
            };

            axios.get(Url({c:'finance.order', a:'orderChart', q:{chartType: this.orderChartType} })).then(res => {
                option.xAxis = res.data.data.xAxis
                option.series = res.data.data.series
                option && myChart.setOption(option);
            }).catch(error => {
                console.log(error)
            })
            
        }
        ,loadUserState() {
            axios.get(Url({c:'user.user', a:'loadUserState'})).then(res => {
                this.userState = res.data.data
            }).catch(error => {
                console.log(error)
            })
        }
        ,loadOrderState() {
            axios.get(Url({c:'finance.order', a:'loadOrderState'})).then(res => {
                this.orderState = res.data.data
            }).catch(error => {
                console.log(error)
            })
        }
    },
})
</script>
{/block}
